<script setup lang="ts">
import { RouterView, useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'

const route = useRoute()
const router = useRouter()
// 记录当前选择的 tab
const active = ref(route.name as string)

watch(active, (nv) => {
  router.push({
    name: nv,
  })
})
</script>

<template>
  <!-- <div class="center">{{ active }}</div> -->
  <RouterView />
  <VanTabbar v-model="active" class="VanTabbar">
    <VanTabbarItem name="homeMoblie" icon="home-o">{{ $t('home') }}</VanTabbarItem>
    <van-tabbar-item name="gameMoblie">
      <span>{{ $t('game') }}</span>
      <template #icon="props">
        <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
        <img class="game-icon" src="@/assets/icon/gameActive.png" v-if="props.active" />
        <img class="game-icon" src="@/assets/icon/game.png" v-else />
      </template>
    </van-tabbar-item>

    <!-- <VanTabbarItem name="game" icon="desktop-o">游戏</VanTabbarItem> -->
    <VanTabbarItem name="applicationMoblie" icon="apps-o">{{ $t('personage') }}</VanTabbarItem>
  </VanTabbar>
</template>

<style>
.center {
  text-align: center;
}
.VanTabbar {
  --van-tabbar-background: #f5f5f5;
  --van-tabbar-item-active-background: #f5f5f5;
}
.game-icon {
  height: 22px !important;
}
</style>
